<template>
  <div class="queue">
    <div class="container">
      <div class="statistical">
        <div class="cardbox">
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-1">
              <!-- <i class="el-icon-user-solid grid-con-icon"></i> -->
              <div class="grid-cont-right">
                <div class="grid-num">{{ queueStatis.AvgNum }}</div>
                <div>平均等待数目</div>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-1">
              <!-- <i class="el-icon-user-solid grid-con-icon"></i> -->
              <div class="grid-cont-right">
                <div class="grid-num">{{ queueStatis.MaxNum }}</div>
                <div>最大等待数目</div>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-1">
              <!-- <i class="el-icon-user-solid grid-con-icon"></i> -->
              <div class="grid-cont-right">
                <div class="grid-num">{{ queueStatis.MinNum }}</div>
                <div>最小等待数目</div>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-1">
              <!-- <i class="el-icon-user-solid grid-con-icon"></i> -->
              <div class="grid-cont-right">
                <div class="grid-num">{{ queueStatis.AvgTime }}</div>
                <div>平均等待时间</div>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-1">
              <!-- <i class="el-icon-user-solid grid-con-icon"></i> -->
              <div class="grid-cont-right">
                <div class="grid-num">{{ queueStatis.MaxTime }}</div>
                <div>最长等待时间</div>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-1">
              <!-- <i class="el-icon-user-solid grid-con-icon"></i> -->
              <div class="grid-cont-right">
                <div class="grid-num">{{ queueStatis.MinTime }}</div>
                <div>最短等待时间</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div class="queue-table">
        <el-table :data="queueList" @sort-change="SortChange" @filter-change="filterChange" border class="table" ref="multipleTable" header-cell-class-name="table-header" stripe>
          <el-table-column prop="pileID" label="充电桩ID" sortable="custom" align="center">
            <template #default="scope">{{ scope.row.pileID }}</template>
          </el-table-column>

          <el-table-column prop="chargingVehicleID" label="当前充电车辆" align="center">
            <template #default="scope">{{scope.row.charge?scope.row.chargingVehicle.vehicleId:"无"}}</template>
          </el-table-column>

          <el-table-column prop="state" label="当前队列状态" align="center">
            <template #default="scope">{{scope.row.state}}</template>
          </el-table-column>

          <el-table-column prop="waitLength" label="等待车辆数" align="center">
            <template #default="scope">{{scope.row.waitLength}}</template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" @click="showDetail(scope.$index, scope.row)">详细信息</el-button>
              <el-drawer :modal="false" title="详细信息" v-model="drawer" :before-close="handleClose">
                <el-descriptions :column="1" label-class-name="my-label" border>
                  <el-descriptions-item label="充电桩编号">{{ detailInfo.pileID }}</el-descriptions-item>
                  <el-descriptions-item label="当前车辆编号">{{ detailInfo.vehicleId }}</el-descriptions-item>
                  <el-descriptions-item label="当前状态">{{ detailInfo.state }}</el-descriptions-item>
                  <el-descriptions-item label="当前电量百分比">{{ detailInfo.batteryPercent *100 }}%</el-descriptions-item>
                  <el-descriptions-item label="总等待时间">{{ detailInfo.totalWaitTime }}分钟</el-descriptions-item>
                  <el-descriptions-item label="剩余充满时间">{{ detailInfo.leftMinutes }}分钟</el-descriptions-item>
                  <el-descriptions-item label="队列等待长度">{{ detailInfo.waitLength }}</el-descriptions-item>
                  <el-descriptions-item label="等待车辆列表">
                    <el-table :data="detailInfo.chargeRequestLinkedList" class="detail-table" border>
                      <el-table-column label="车辆编号" align="center">
                        <template #default="scope">{{ scope.row.vehicleId }}</template>
                      </el-table-column>
                      <el-table-column label="预计充电时间" align="center">
                        <template #default="scope">{{scope.row.estimateChargeTime}}</template>
                      </el-table-column>
                    </el-table>
                  </el-descriptions-item>
                </el-descriptions>
              </el-drawer>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="page.pageIndex" :page-size="page.pageSize" :total="page.totalElements" @current-change="handlePageChange">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        orderBy: "waitMinutes",
        page: 1,
        pageSize: 5,
        asc: true,
      },
      queueList: [],
      page: {
        pageIndex: 1,
        pageSize: 5,
        pageTotal: 1,
        totalElements: 0,
      },
      drawer: false,
      detailInfo: {
        pileID: 0,
        vehicleId: 0,
        state: "",
        batteryPercent: 0,
        totalWaitTime: 0,
        leftMinutes: 0,
        waitLength: 0,
        chargeRequestLinkedList: [],
      },
      queueStatis: {
        AvgNum: 0,
        MaxNum: 0,
        MinNum: 0,
        AvgTime: 0,
        MaxTime: 0,
        MinTime: 0,
      },
    };
  },
  created() {
    this.getQueueList();
  },
  methods: {
    async getQueueList() {
      // 根据分页获取对应的队列
      const res = await this.$axios.get(
        `queue/wait/${this.queryInfo.orderBy}/${this.queryInfo.page}/${this.queryInfo.pageSize}/${this.queryInfo.asc}`
      );
      this.queueList = res.content;
      this.page.pageIndex = res.number + 1;
      this.page.pageSize = res.size;
      this.page.pageTotal = res.totalPages;
      this.page.totalElements = res.totalElements;
      const result = await this.$axios.get("/queue/admin/overview");
      this.queueStatis.AvgNum = result.queueAvgNum;
      this.queueStatis.AvgTime = result.queueAvgTime;
      this.queueStatis.MaxNum = result.queueMaxNum;
      this.queueStatis.MaxTime = result.queueMaxTime;
      this.queueStatis.MinNum = result.queueMinNum;
      this.queueStatis.MinTime = result.queueMinTime;
    },
    async showDetail(index, row) {
      this.drawer = true;
      const res = await this.$axios.get(`queue/admin/${row.pileID}`);
      this.detailInfo.pileID = res.pileID;
      this.detailInfo.vehicleId = res.chargingVehicle.vehicleId;
      this.detailInfo.state = res.state;
      this.detailInfo.batteryPercent =
        res.chargingVehicle.batteryPercent > 0
          ? res.chargingVehicle.batteryPercent
          : 0;
      this.detailInfo.totalWaitTime =
        res.totalWaitTime > 0 ? res.totalWaitTime : 0;
      this.detailInfo.leftMinutes = res.leftMinutes > 0 ? res.leftMinutes : 0;
      this.detailInfo.waitLength = res.waitLength;
      this.detailInfo.chargeRequestLinkedList = res.chargeRequestLinkedList;
      console.log(this.detailInfo.vehicleId);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handlePageChange(newPage) {
      this.queryInfo.page = newPage;
      this.getQueueList();
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  min-height: 469px;
  padding: 20px;
}
.statistical {
  .cardbox {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    // transform: translateY(-10%);
    .el-card {
      width: 16%;
      margin-bottom: 10px;
      background-color: #000;
      border: none;
    }
  }
}
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 2;
  text-align: center;
  font-size: 14px;
  color: #fff;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}
// .queue-table {
//   width: 100%;
//   border: none;
//   border-radius: 10px !important;
//   overflow: hidden;
// }
// .queue-table th {
//   color: #fff; //字体颜色
//   font-weight: bold; //字体粗细
//   background-color: #041a23 !important; //背景颜色
//   border: none; //边框有无
//   border-bottom: 2px solid #062735; //边框粗细及样式颜色
// }
// .queue-table td {
//   background-color: #041a23 !important; //背景色
//   color: #fff; //字体色
//   border: none; //是否有边框
// }
// el-table-column .detail td {
//   background-color: #fff !important; //背景色
//   color: #000; //字体色
// }
// .el-descriptions .is-bordered td {
// }
// .dsc-table {
//   padding: 0;
// }
// .detail {
//   width: 100%;
// }
.el-table__row .el-table_1_column_5 .cell .el-overlay {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
.is-bordered > tbody > tr:last-child .el-descriptions__content {
  padding: 0;
}
.detail-table {
  border: none;
  width: 90%;
}
.el-table td div {
  // background-color: rgba(0, 0, 0, 0.2) !important;
  color: #000 !important;
}
</style>
